<template>
	<div class="home-box">
		<div class="top-box">
			<NewTopnavVue></NewTopnavVue>
			<newNav></newNav>
		</div>
		<div class="bj-box hd-box">
			<div class="bj-center-box">
				<div class="bj-left-box">
					<div class="container" style="margin-right: 330px;">
						<span>A</span>
						<span>I</span>
						<span>开</span>
						<span>放</span>
						<span>社</span>
						<span>区</span>
					</div>
					<span class="span-cp">给你一款专属于你的AI</span>
						<span class="span-fl">AI工具</span>
						<span class="span-fl">社区</span>
						<span class="span-fl">AI创新</span>
						<span class="span-fl">产业合作</span>
						<button class="lj-btn" @click="goAI">了解详情</button>
					<img class="bj-img" src="../../assets/AINewhome/BgSub_NEWbj1 (1).png" alt="">

				</div>
			</div>
		</div>
		<div class="AIgj-box hd-box">
			<div class="box-AIgj">
				<div class="title-AIgj">
					<h1>AI工具</h1>
				</div>
				<div class="AIgj-fl-box" @click="goAI">
					<div class="CHATgpt-box" shadow="hover" >
						<h2>Chat GPT</h2>
						<img src="../../assets/AINewhome/chagpt.png" alt="">
						<span>根据用户的提问和请求给予有用和有效的答案</span>
					</div>
					<div class="CHATgpt-box" @click="goAI">
						<h2>AI 绘画</h2>
						<!-- <p><span>Chat</span><span>GPT</span></p> -->
						<img src="../../assets/AINewhome/AIhh2.png" alt="">
						<span>利用AI技术进行绘画，实现了高效、创造性和精确度并存的绘画。</span>
					</div>
					<div class="CHATgpt-box" @click="goAI">
						<h2>AI 虚拟人</h2>
						<!-- <p><span>Chat</span><span>GPT</span></p> -->
						<img src="../../assets/AINewhome/AIlt.png" alt="">
						<span>为用户提供更加个性化、有趣的交互体验。</span>
					</div>
					<div class="CHATgpt-box" @click="goAI">
						<h2>AI 模拟面试</h2>
						<!-- <p><span>Chat</span><span>GPT</span></p> -->
						<img src="../../assets/AINewhome/AIwd.png" alt="">
						<span>虚拟实境中通过人工智能技术模拟真实面试场景，提供针对性评估和指导。</span>
					
					</div>
				</div>
			</div>
		</div>
		<div class="AIsq-box hd-box">
			<div class="sq-box">
				<div class="sq-center-box">
					<span class="sq-size">开放社区</span>
				</div>
				<div class="sqgn-box" @click="goCommunity">
					<div class="AIjl-box">
						<div class="aisqjs-left">
							<img style="height: 100%;" src="../../assets/AINewhome/AIsq.png" alt="">
						</div>
						<div class="aisqjs-right" @click="goCommunity">
							<p>AI使用分享</p>
							<span>通过分享使用AI工具的经验和技巧，帮助他人更好地了解和使用AI工具。这样可以促进AI技术的传播和应用，提高工作效率和解决问题的能力。</span>
						</div>
					</div>
					<div class="AIjl-box">
						<div class="aisqjs-left" @click="goCommunity">
							<img style="height: 100%;" src="../../assets/AINewhome/AIcx.png" alt="">
						</div>
						<div class="aisqjs-right">
							<p>AI创新分享</p>
							<span>通过分享创新的AI思路和想法，激发他人的创造力和灵感，推动AI技术的进一步发展和应用也完成您的创新创业想法。</span>
						</div>
					</div>
					<div class="AIjl-box" @click="goCommunity">
						<div class="aisqjs-left">
							<img style="height: 100%;" src="../../assets/AINewhome/zsjl.png" alt="">
						</div>
						<div class="aisqjs-right">
							<p>交流社区</p>
							<span>社区知识、技术分享是指通过社区平台分享和交流各种领域的知识和技术，促进成员之间的学习和合作，推动社区的发展和创新。社区知识、技术分享是指通过社区共享知识和技术，促进成员之间的学习和交流，推动共同进步和创新。</span>
						</div>
					</div>

				</div>
			</div>
		</div>
		<div class="AIcx-box AIsq-box hd-box">
			<div class="sq-box">
				<div class="sq-center-box">
					<span class="sq-size">AI创新</span>
				</div>
				<div class="sqgn-box2">
					<div class="AIjl-box2">
						<div class="AJcx-box1">
							<div class="AIcx-left">
								<img style="height: 70%;" src="../../assets/AINewhome/AIcx2.png" alt="">
							</div>
							<div class="AIcx-right">
								<span class="cx-span">AI创新</span>
								<span class="cx-span2">与AI合作，共同探索和创造新的解决方案和创新思路，推动科技进步和社会发展。</span>
							</div>
						</div>
						<div class="AJcx-box1">
							<div class="AIcx-left">
								<img style="height: 70%;" src="../../assets/AINewhome/AIyy.png" alt="">
							</div>
							<div class="AIcx-right">
								<span class="cx-span">AI音乐</span>
								<span class="cx-span2">与AI合作，共同创作和演奏音乐，探索新的音乐风格和创作方式，推动音乐艺术的发展和创新。</span>
							</div>
						</div>
					</div>
					<div class="AIjl-box2" style="margin-top: 15px;">
						<div class="AJcx-box1">
							<div class="AIcx-left">
								<img style="height: 70%;" src="../../assets/AINewhome/AIhh2.png" alt="">
							</div>
							<div class="AIcx-right">
								<span class="cx-span">AI绘画</span>
								<span class="cx-span2">与AI合作，共同创作和探索绘画作品，开拓新的艺术风格和创作方式，推动绘画艺术的发展和创新。</span>
							</div>
						</div>
						<div class="AJcx-box1">
							<!-- <div class="gdcx-box">
								<img src="../../assets/AINewhome/AIcz1.jpg" alt="">
							</div> -->
							<div class="AIcx-left">
								<img style="height: 70%;" src="../../assets/AINewhome/AIwz.png" alt="">
							</div>
							<div class="AIcx-right">
								<span class="cx-span">AI文章</span>
								<span class="cx-span2">与AI合作，共同创作PPT、文档等。它可以准确捕捉文字、表情、图像、语音或者文本中所涵盖的内容，并结合当下热门数据产生新的内容。</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="cyhz-box hd-box bottom-z-box">
			<div class="cyhz-cneter">
				<div class="AIhz-size">
					<span class="hz-size">产业合作</span>
				</div>
				<div class="hzgn-box">
					<div class="hz-left">
						<ul>
							<li>
								<span class="hz-gn">产业入驻</span>
								<span>
									为企业提供一站式产业入驻服务，提供快捷、安全、便捷的系统，支持多种产业形式，为您提供最优质的服务，实现最佳的结果。
								</span>
							</li>
							<li>
								<span class="hz-gn">合作圈</span>
								<span>
									您可以在我们社区与其他用户或者其他企业进行合作，以实现共同利益、开展有序合作为目的，通过双方互助、交换信息、配合资源来实现共同目标。
								</span>
							</li>
							<li>
								<span class="hz-gn">合作伙伴</span>
								<span>
									我们可以与您达成一致的目标，进行合作。
								</span>
							</li>
						</ul>
					</div>
					<div class="hz-right">
						<img style="width: 400px;" src="../../assets/AINewhome/AIcx2.png" alt="">
					</div>
				</div>
			</div>
		<bottomNav></bottomNav>
		</div>
	</div>
</template>

<script>
import NewTopnavVue from './NewTopnav.vue';
import newNavVue from '@/components/CeBianNav/newNav.vue';
import bottomNav from '@/components/bottom-nav.vue';
// import cbNav from '@/components/CeBianNav/cbNav.vue';
import newNav from '@/components/CeBianNav/newNav.vue';
export default {
	name: 'FrontendVue2NewBK',
	components:{
		NewTopnavVue,
		newNavVue,
		bottomNav,
		newNav
	},
	data() {
		return {

		};
	},

	mounted() {
		
	},

	methods: {
		  goAI(){
		    this.$router.push("/chat")
      },
      goCommunity(){
        this.$router.push("/blogHome")
      }
	},
};
</script>

<style lang="less" scoped>
.home-box{
	width: 100%;
	height: 100vh;
	scroll-snap-type: y mandatory;
	overflow-y:scroll ;
	.hd-box{
	scroll-snap-align: start;
}
	// background-color: darkkhaki;
	.top-box{
		width: 100%;
		height: 60px;
		// background-color: chocolate;
		display: flex;
		position: absolute;
	}
	.bj-box{
		width: 100%;
		height: 100vh;
		background-color: #d3dceb;
		background-size: cover;
		z-index: -1;
		// background-image: url(../../assets/AINewhome/NEWbj1.png);
		h1{
			font-size: 80px;
			font-weight: bolder;
		}
		.container span {
			display: inline-block;
			color: rgba(0, 0, 0, 0.658);
			text-shadow:5px 5px 4px grey;
			font-weight: bold;
			text-transform: uppercase;
			font-size: 80px;
			animation: side-slide 4s forwards infinite;
			transform: translateX(-100%) scale(0);
			filter: opacity(0);
			animation-delay: calc((var(--n) - 1) * 0.1s);
		}
		@keyframes side-slide {
	15%, 20% {
		transform: translateX(0.5em) scale(1);
		color: rgba(0, 0, 0, 0.658);

	}

	24% {
		transform: translateX(0) scale(1.2);
		color: rgba(255, 255, 255, 0.856);
	}

	25%, 75% {
		transform: translateX(0) scale(1);
		filter: opacity(1);
					color: rgba(0, 0, 0, 0.658);

	}

	90%, 100% {
		transform: translateX(100%) scale(0);
		filter: opacity(0);
	}
}
.container span:nth-child(1) { --n: 1; }
.container span:nth-child(2) { --n: 2; }
.container span:nth-child(3) { --n: 3; }
.container span:nth-child(4) { --n: 4; }
.container span:nth-child(5) { --n: 5; }
// .container span:nth-child(6) { --n: 6; }


		.bj-center-box{
			width: 1500px;
			height: 100%;
			margin: 0 auto;
			display: flex;
			align-items: center;
		}
		.bj-left-box{
			width: 50%;
			height: 80%;
			// background-color: crimson;
			margin-left: 100px;
			margin-top: 300px;
			display: flex;
			flex-direction: column;
			// justify-content: space-around;
		}
		.span-cp{
			margin-top: 20px;
			font-size: 30px;
			text-shadow:5px 5px 4px grey;
			// font-weight: 100;
		}
	}
}

.span-fl{
	width: auto;
	height: auto;
	font-size: 20px;
	margin-left:30px;
	margin-top: 20px;
	text-shadow:5px 5px 4px grey;
}
// .span-fl:hover{
// 	// transform: scale();
// 	transition: all 0.2s linear;
// }
.lj-btn{
	width: 150px;
	height: 50px;
	border-radius:20px ;
	border: none;
	background: #4b76cc;
	color: white;
	margin: 30px 0 0 0;
}
.bj-img{
	width: 700px;
	// position: absolute;
	z-index: 1;
	// left: 400px;
	// top: 60px;
	margin:-530px 0 0  600px;
}
.AIgj-box{
	width: 100%;
	height: 100vh;
				// background: #f6f6f6;
				// background-color: #b1d4fd;

	display: flex;
	align-items: center;
	justify-content: center;
	.box-AIgj{
		width: 1500px;
		height: 80%;
		background: #ffffff;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		.title-AIgj{
			width: 100%;
			display: flex;
			justify-content: center;
			h1{
			font-size: 50px;
			font-weight: bolder;
			letter-spacing:10px;
			}
		}
		.AIgj-fl-box{
			width: 100%;
			height: 60%;
			// background: chocolate;
			display: flex;
			justify-content: space-around;
			align-items: center;
			.CHATgpt-box{
				width: 22%;
				height: 60%;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
				padding: 20px;
  			transition: all 0.2s linear;

				h2{
					 font-size: 30px;
						font-weight: bolder;
						letter-spacing:5px;
				}
				img{
					width: 100px;
				}
				span{
					font-size: 16px;
				}
			}
		}
	}
}
.AIsq-box{
	width: 100%;
	height: 100vh;
	background-color: #f3f5f8;
	display: flex;
	justify-content: center;
	align-items: center;
	.sq-box{
		width: 1500px;
		height: 75%;
		display: flex;
		// justify-content: center;
		flex-direction: column;
		// align-items: center;
		// background: aquamarine;
		margin: 0 auto;
		.sq-center-box{
			width: 100%;
			// height: 80%;
			// background-color: rgb(207, 207, 223);
			display: flex;
			justify-content: center;
			// margin-top:50px ;
			.sq-size{
				font-size: 50px;
				font-weight: bolder;
				letter-spacing:10px;
			}
		}
		.sqgn-box{
			width: 100%;
			height: 100%;
			// background-color: #4b76cc;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;

		}
		.AIjl-box{
			width: 70%;
			height: 25%;
			background: #eef1f6;
			display: flex;
			align-items: center;
			transition: all 0.2s linear;
			.aisqjs-left{
				width: 28%;
				height: 100%;
				background: rgb(255, 255, 255);
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.aisqjs-right{
				width: 60%;
				height: 60%;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				// align-items: center;
				margin-left: 30px;
				transition: all 0.5s linear;

				p{
					// margin-top: 15px;
					font-size: 20px;
					font-weight: bolder;
				}
				span{
					// margin-top: 15px;
					font-size: 16px;
				}
			}
		}
		.AIjl-box:hover{
				box-shadow: 5px 5px 20px 1px rgb(216, 216, 216);
				transform: scale(1.05);
					transition: all 0.2s linear;
			}
	}
}
.AIcx-box{
	width: 100%;
	height: 100vh;
	// background-color: rgb(126, 201, 144);
	.sqgn-box2{
		width: 100%;
			height: 100%;
			// background-color: #4b76cc;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.AIjl-box2{
				width: 80%;
				height: 35%;
				// background-color: cadetblue;
				// border: 1px solid black;
				display: flex;
				justify-content: space-between;
			}
			.AJcx-box1{
				width: 49%;
				height: 100%;
				// background: coral;
				display: flex;
				justify-content: space-between;
				align-items: center;
				transition: all 0.2s linear;

				// .gdcx-box{
				// 	width: 100%;
				// 	height: 100%;
				// 	background-image: url(../../assets/AINewhome/AIcz1.jpg);
				// }
				.AIcx-left{
					width: 40%;
					height: 100%;
					// background-color: deeppink;
					display: flex;
					justify-content: center;
					align-items: center;
				}
				.AIcx-right{
					width: 55%;
					height: 60%;
					// background-color: darkviolet;
					display: flex;
					flex-direction: column;

					// justify-content: space-around;
					// align-items: center;
					.cx-span{
						font-size: 30px;
						font-weight: bolder;
					}
					.cx-span2{
						font-size: 16px;
						margin-top: 20px;
					}
				}

	}
}
.AJcx-box1:hover{
					// background-color: #d3dceb;
					box-shadow: 5px 5px 20px 1px rgb(216, 216, 216);
					transform: scale(1.05);
					transition: all 0.2s linear;
					// color: white;
				}
			}
.CHATgpt-box:hover{
	// background-color: #d3dceb;
	box-shadow: 5px 5px 20px 1px rgb(216, 216, 216);
	transform: scale(1.05);
	transition: all 0.2s linear;
	// color: white;
}
.cyhz-box{
	width: 100%;
	height: 100vh;
	// background-color: rgb(126, 156, 201);
	display: flex;
	justify-content: center;
	align-items: center;
	.cyhz-cneter{
		width: 1500px;
		height: 100%;
		// background-color: blue;
		.AIhz-size{
			width: 100%;
			height: 60px;
			// background-color: chartreuse;
			display: flex;
			justify-content: center;
			align-items: center;
	margin-top: 100px;

			.hz-size{
				font-size: 50px;
				font-weight: bolder;
				letter-spacing: 10px;
			}
		}
		.hzgn-box{
			width: 100%;
			height: 70%;
			// background: red;
			display: flex;
			margin-top: 70px;

			.hz-left{
				width: 60%;
				height: 100%;
				// background: #4b76cc;
				ul{
					width: 100%;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					align-items: center;
					li{
						width: 80%;
						height: 20%;
						padding: 20px;
						background-color: rgb(240, 240, 240);
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						align-items: center;
						transition: all 0.2s linear;
						
						.hz-gn{
							font-size: 30px;
						}
					}
					li:hover{
						// background-color: #d3dceb;
						box-shadow: 5px 5px 20px 1px rgb(216, 216, 216);
						transform: scale(1.05);
						transition: all 0.2s linear;
					// filter: grayscale(100%);
						// color: white;
					}
				}
			}
			.hz-right{
				width: 40%;
				height: 100%;
				// background: #319965;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
}
.bottom-z-box{
	display: flex;
	flex-direction: column !important;
}
</style>